<template>
  <!-- 日期范围选择器 -->
  <div v-if="isRange">
    <el-date-picker
      v-model="dateRange"
      :type="dateRangeSelectType"
      placeholder="请选择"
      :clearable="false"
      :value-format="valueFormat"
      :format="valueFormat"
      @change="dateRangeChange"
    ></el-date-picker>
  </div>
  <!-- 日期选择器 -->
  <div v-else>
    <el-date-picker
      v-model="date"
      :type="dateSelectType"
      start-placeholder="请选择开始时间"
      end-placeholder="请选择结束时间"
      :clearable="false"
      :value-format="valueFormat"
      :format="valueFormat"
      @change="dateChange"
    ></el-date-picker>
  </div>
</template>
<script setup lang="ts">
import { computed, onMounted } from "vue-demi";
import useGetDate from "@/hooks/useGetDate";


const prop = defineProps({
  isRange: {
    type: Boolean,
    default: () => false,
  },
  date: {
    type: String,
    default: () => useGetDate('yyyy-MM-dd'),
  },
  dateSelectType: {
    type: String,
    default: () => "date",
  },
  dateRange: {
    type: Array,
    default: () => [],
  },
  dateRangeSelectType: {
    type: String,
    default: () => "daterange",
  },
});

const formatArray = [
  {
    type: "year",
    value: "YYYY",
  },
  {
    type: "month",
    value: "YYYY-MM",
  },
  {
    type: "datetime",
    value: "YYYY-MM-DD hh:mm",
  },
];

const valueFormat = computed(() => {
  for (let index = 0; index < formatArray.length; index++) {
    if (prop.dateSelectType === formatArray[index].type) {
      return formatArray[index].value;
    }
  }
  return "YYYY-MM-DD";
});

const emit = defineEmits(["dateChange", "dateRangeChange"]);

const dateChange = () => {
  emit("dateChange", prop.date);
};

const dateRangeChange = () => {
  emit("dateRangeChange", prop.dateRange);
};

</script>
<style lang="scss"></style>
